jQuery Cookbook by unknow

Author:unknow
Language: eng
Format: epub
Tags: COMPUTERS / Programming Languages / JavaScript
ISBN: 9780596808112
Publisher: O'Reilly Media
Published: 2009-11-08T16:00:00+00:00

Discussion

The preceding code is generic enough to allow for any number of “Character remaining” messages and <textarea> elements on a given page. This could be useful if you were building a content management or data entry system.

To protect against when the user attempts to copy and paste data into the <textarea> using a mouse, we need to bind both the input and paste events. The mouseup event cannot be used because it is not triggered when selecting an item from the browser’s contextual menu. The input event is part of HTML5 (Working Draft) and already implemented by Firefox, Opera, and Safari. It fires on user input, regardless of input device (mouse or keyboard). Safari, at the time of this writing, has a bug and does not fire the input event on <textarea> elements. Both Safari and Internet Explorer understand the paste event on <textarea> elements and understand keyup to capture keystrokes. Attaching keyup, input, and paste is redundant but, in this case, benign. The update function is simple enough that there aren’t any performance issues, and it only manipulates the DOM when needed, so any redundant update calls after the first would do nothing.

An alternative to redundant events would be to use setInterval when the <textarea> element has focus. The same update function could be called from the interval, and if it is paired with the keyup event, you’d get the immediate updating on key presses and an arbitrary update interval, say 300 milliseconds, for when information is pasted into the <textarea> element. If the update function were more complex or costly, this might be a better alternative.

When binding events to form elements, it is sometimes important to use a timeout to slightly delay a function call. In the previous example, Internet Explorer triggers the paste event before the text from the clipboard is actually added to the <textarea> element. Thus, the calculation for characters remaining would be incorrect until the user clicks or presses another key. By using setTimeout(update,0), the update function is placed at the end of the call stack and will fire after that browser has added the text:

$input.bind('input keyup paste', function(){setTimeout(update,0)} );

What will happen when JavaScript is disabled? You should hide the “Characters remaining” message by default in CSS. Then use JavaScript to add a class name to a parent element that would override the previous CSS rule. Also, it’s important to check the length of the message again on the server side:

<style type="text/css" title="text/css"> .remaining { display:none; } .jsEnabled .remaining { display:block; } </style> ... // when the HTML DOM is ready $(document).ready(function(){ $('form').addClass('jsEnabled'); });

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.